import { useState, useEffect } from 'react'
import '../assets/css/coupon.css'
import { Tabs, CheckList } from 'antd-mobile'
import { getCoupon } from '../request/api'
import { useNavigate } from 'react-router-dom'
function timer(val) {
    let date = new Date(val); let year = date.getFullYear();
    let Month = (date.getMonth() + 1 + '').padStart(2, '0');
    let day = (date.getDate() + '').padStart(2, '0');
    // console.log(val);
    return `${year}/${Month}/${day} `
}
export default function Coupon() {
    const navigate = useNavigate();
    let [coupon1, setcoupon1] = useState([])
    let [coupon2, setcoupon2] = useState([])
    let [coupon3, setcoupon3] = useState([])
    // let [allcoupon, setallcoupon] = useState([])

    useEffect(() => {
        getCoupon().then(res => {
            console.log(res, '优惠券');
            if (res.code == 200) {
                setcoupon1(res.list[0].content)
                setcoupon2(res.list[1].content)
                setcoupon3(res.list[2].content)
                // setallcoupon(res.list)
            }
        })
    }, [])
    function jump(item) {
        navigate('/order', { state: { title: item.title, money: item.money } })
    }
    return (
        <div id='Coupon'>
            <header>
                <div className="header-top">
                    <i className='iconfont icon-zuojiantou'></i>
                    <h1>优惠券</h1>
                </div>
            </header>
            <div className="con">
                <Tabs>
                    <Tabs.Tab title='未使用' key='No' className='No'>
                        <CheckList>
                            {
                                coupon1.map(item => {
                                    return <CheckList.Item className='li' key={item.id} value={item.id} onClick={jump.bind(this, item)}>
                                        <div className="top">
                                            <div>
                                                <span>￥<span>{item.money}</span></span>
                                                <p>满{item.limit_money}可用</p>
                                            </div>
                                            <div>
                                                <p>{item.title}</p>
                                                <p>{timer(Number(item.begintime))}至{timer(Number(item.endtime))}</p>
                                            </div>
                                        </div>
                                        <div className="bot">
                                            <p>{item.description}</p>
                                        </div>
                                    </CheckList.Item>
                                })
                            }
                        </CheckList>

                    </Tabs.Tab>
                    <Tabs.Tab title='已使用' key='yes' className='No'>
                        <CheckList>
                            {
                                coupon2.map(item => {
                                    return <CheckList.Item className='li' key={item.id} value={item.id} onClick={jump.bind(this)} disabled>
                                        <div className="top">
                                            <div>
                                                <span>￥<span>{item.money}</span></span>
                                                <p>满{item.limit_money}可用</p>
                                            </div>
                                            <div>
                                                <p>{item.title}</p>
                                                <p>{timer(Number(item.begintime))}至{timer(Number(item.endtime))}</p>
                                            </div>
                                        </div>
                                        <div className="bot">
                                            <p>{item.description}</p>
                                        </div>
                                    </CheckList.Item>
                                })
                            }
                        </CheckList>
                    </Tabs.Tab>
                    <Tabs.Tab title='已失效' key='Bug' className='No'>
                        <CheckList>
                            {
                                coupon3.map(item => {
                                    return <CheckList.Item className='li' key={item.id} value={item.id} onClick={jump.bind(this)} disabled>
                                        <div className="top">
                                            <div>
                                                <span>￥<span>{item.money}</span></span>
                                                <p>满{item.limit_money}可用</p>
                                            </div>
                                            <div>
                                                <p>{item.title}</p>
                                                <p>{timer(Number(item.begintime))}至{timer(Number(item.endtime))}</p>
                                            </div>
                                        </div>
                                        <div className="bot">
                                            <p>{item.description}</p>
                                        </div>
                                    </CheckList.Item>
                                })
                            }
                        </CheckList>
                    </Tabs.Tab>
                </Tabs>
                <div className="guize">
                    <span>?</span>
                    <span>优惠券规则</span>
                </div>
            </div>
            <footer>
                <div>抢更多好券 <i className='iconfont icon-arrow-right'></i> </div>
            </footer>
        </div>
    )
}

